<template>
  <u-popup v-model="show" mode="bottom" height="600upx">
    <view class="site-header">
      <u-cell-item :arrow="false">
        <view slot="title">新增资源</view>
        <u-button size="mini" @click="show = !show">关闭</u-button>
      </u-cell-item>
    </view>
    <view class="site-content">
      <u-form ref="uForm" label-width="100px" class="u-p-10">
        <u-form-item label="名称：">
          <u-input v-model="model.name" border placeholder="输入资源名称" />
        </u-form-item>
        <u-form-item label="资源地址：">
          <u-input v-model="model.url" border placeholder="输入资源地址" />
          <view slot="right">
            <u-button size="mini" @click="handleChange">切换</u-button>
          </view>
        </u-form-item>
      </u-form>
      <u-gap margin-button="50px"></u-gap>
      <view class="u-p-10">
        <u-button type="success" @click="handlePullCku" :loading="loading">拉取资源</u-button>
      </view>
    </view>
  </u-popup>

</template>

<script>
  import Tools from '@/utils/tools.js'
	// https://www.myhelen.cn/helen/169.htm  资源站
  export default {
    data() {
      return {
        show: false,
        model: {
          name: "大白菜",
          url: "https://fastly.jsdelivr.net/gh/ls125781003/dmtg@main/zy_yuan.json"
        },
        current: -1,
        loading: false
      }
    },
    created() {
      // console.log(this.cku)
    },
    methods: {
      handleChange(){
        this.model.url = 'https://gitcode.net/-/snippets/1706/raw/master/ZY-Player.json'
      },
      async handlePullCku() {
        if (!this.model.name) {
          this.$u.toast('资源名称不能为空')
          return
        }
        if (!this.model.url) {
          this.$u.toast('资源地址不能为空')
          return
        }
        let index = this.cku.findIndex(t => t.name == this.model.name)
        if (index !== -1) {
          this.$u.toast('资源名称已经存在，请重新输入！')
          return
        }
        this.loading = true
        this.$u.get(this.model.url).then(response => {
          let data = Tools.handleCku(response)
          data.id = this.$u.guid(10, false, 10)
          data.orderNum = this.cku.length + 1
          data.name = this.model.name
          data.url = this.model.url
          if (this.current == -1) {
            this.cku.push(data)
            this.model.name = ''
            this.model.url = ''
          } else {
            data.id = this.model.id
            data.orderNum = this.model.orderNum
            let kindex = this.cku.findIndex(t => t.id == this.model.id)
            this.cku.splice(kindex, 1, data)
          }
          this.$u.vuex('cku', this.cku)
          this.$u.toast('资源拉取成功！')
          this.$emit('submit', { data, index: this.current })
          this.show = false
        }).catch(err => {
          this.$u.toast('资源拉取失败！' + err)

        }).finally(() => {
          this.loading = false
        })
      },
      handleModify(site, index) {
        this.model = { ...site }
        this.current = index
        this.show = true
      },
      handleShow() {
        this.current = -1
        this.show = true
      }
    }
  }
</script>

<style lang="scss">
  .site-content {
    position: relative;
    top: 60px;
    border: 0px solid #096;
  }

  .site-header {
    position: fixed;
    background-color: #FFF;
    box-shadow: #EEE 5px 5px 3px;
    border: 1px solid #EEE;
    width: 100%;
    z-index: 10;
  }
</style>